<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '开柜',
  },
}
</route>

<template>
  <view class="bg-white min-h-screen">
    <!-- PLUS会员卡片 -->
    <view class="mx-4 mt-4 p-6 rounded-lg bg-[#4F6BE6] text-white">
      <view class="text-xl font-bold">PLUS会员</view>
      <view class="mt-2 text-sm opacity-90">PLUS会员可享受无限开柜</view>
      <view class="text-sm opacity-90">可免广告</view>
    </view>

    <!-- 会员卡选项 -->
    <view class="mx-4 mt-6 flex justify-between">
      <!-- 月卡 -->
      <view
        class="w-28 p-4 rounded-lg flex flex-col items-center cursor-pointer transition-all duration-300"
        :class="selectedCard === 'month' ? 'bg-[#4F6BE6] text-white' : 'bg-gray-50'"
        @tap="selectCard('month')"
      >
        <view class="w-6 h-6 bg-[#F3B766] mb-2"></view>
        <view class="text-sm">月卡</view>
        <view class="text-sm font-bold">¥100/月</view>
      </view>

      <!-- 季卡 -->
      <view
        class="w-28 p-4 rounded-lg flex flex-col items-center cursor-pointer transition-all duration-300"
        :class="selectedCard === 'quarter' ? 'bg-[#4F6BE6] text-white' : 'bg-gray-50'"
        @tap="selectCard('quarter')"
      >
        <view class="w-6 h-6 bg-[#F3B766] mb-2"></view>
        <view class="text-sm">季卡</view>
        <view class="text-sm font-bold">¥300/月</view>
      </view>

      <!-- 年卡 -->
      <view
        class="w-28 p-4 rounded-lg flex flex-col items-center cursor-pointer transition-all duration-300"
        :class="selectedCard === 'year' ? 'bg-[#4F6BE6] text-white' : 'bg-gray-50'"
        @tap="selectCard('year')"
      >
        <view class="w-6 h-6 bg-[#F3B766] mb-2"></view>
        <view class="text-sm">年卡</view>
        <view class="text-sm font-bold">¥1000/年</view>
      </view>
    </view>

    <!-- 会员权益 -->
    <view class="mx-4 mt-8">
      <view class="text-base font-medium mb-3">会员权益</view>
      <view class="text-sm text-gray-600 mb-2">权益一：限期内无限开柜(派件)</view>
      <view class="text-sm text-gray-600">权益二：限期内无限开柜</view>
    </view>

    <!-- 底部按钮 -->
    <view class="fixed bottom-8 left-4 right-4">
      <button class="w-full py-3 bg-[#4F6BE6] text-white rounded-lg" @click="goToRecharge">
        立即开通 {{ buttonPrice }}
      </button>
      <view class="text-xs text-center mt-2 text-gray-400">购买即视为同意《会员卡开卡协议》</view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'

const selectedCard = ref('month')

const buttonPrice = computed(() => {
  switch (selectedCard.value) {
    case 'month':
      return '¥100/月'
    case 'quarter':
      return '¥300/月'
    case 'year':
      return '¥1000/年'
    default:
      return '¥100/月'
  }
})

const selectCard = (type: 'month' | 'quarter' | 'year') => {
  selectedCard.value = type
}

const goBack = () => {
  uni.navigateBack()
}

const goToRecharge = () => {
  uni.navigateTo({
    url: '/pages/Rechargeable/index',
  })
}
</script>
